<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-left">
        <el-avatar size="small" />
        <span class="company-name">公司名称</span>
      </div>
      <div class="header-center">
        <el-radio-group v-model="mainTab" size="large" class="main-tabs">
          <el-radio-button label="group">集团管理</el-radio-button>
          <el-radio-button label="company">企业管理</el-radio-button>
          <el-radio-button label="platform">平台运营</el-radio-button>
          <el-radio-button label="system">系统设置</el-radio-button>
        </el-radio-group>
      </div>
      <div class="header-right">
        <el-icon><Search /></el-icon>
        <el-avatar size="small" />
        <span>{{accountName}}</span>
        <span class="header-btn">应用市场</span>
        <span class="header-btn">客户端</span>
        <el-icon><UserFilled /></el-icon>
        <el-icon><Document /></el-icon>
      </div>
    </div>
    <!-- 下方为原有布局 -->
    <div class="layout">
      <el-menu
        :default-active="activeMenu"
        class="side-menu"
        router
        @select="handleSelect"
      >
        <el-sub-menu>
          <template #title>企业管理</template>
          <el-menu-item index="/List">溯源管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/Detail">养殖信息</el-menu-item>
        <el-sub-menu index="3">
          <template #title>平台运营</template>
          <el-menu-item index="/operation">运营信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>系统设置</template>
          <el-menu-item index="/settings">系统设置</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Search, UserFilled, Document } from '@element-plus/icons-vue'
const accountName=ref("")
onMounted(()=>{
    accountName.value=localStorage.getItem("accountName")||""
})
const route = useRoute()
const activeMenu = ref(route.path)
const mainTab = ref('company') // 当前高亮的一级菜单
watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
})
function handleSelect(index: string) {
  activeMenu.value = index
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  height: 56px;
  background: #333;
  color: #fff;
  padding: 0 24px;
}
.header-left {
  display: flex;
  align-items: center;
  min-width: 180px;
}
.company-name {
  margin-left: 8px;
  font-weight: bold;
}
.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.main-tabs {
  background: transparent;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-btn {
  margin: 0 8px;
  cursor: pointer;
}
.layout { display: flex; min-height: 100vh; }
.side-menu { width: 220px; min-height: 100vh; }
.content { flex: 1; background: #f5f7fa; padding: 24px; }
</style> 